<template>
    <div class="exam-list">
        <div class="exam">
            <div v-for="(item, index) in  datas " class="exam-question" :key="item.id"
                :class="[`exam-question-${index + 1}`]">
                <div class="question-title">
                    {{ index + 1 }} . {{ item.title }} {{ item.type === '多选题' ? "(多选题)" : "" }}
                </div>

                <template v-if="item.type === '单选题'">
                    <div v-for="(option, index2) in  item.options " :key="index2" class="question-options">
                        <div class="option">
                            <el-radio :disabled="type === 'result'" fill=" #3560ab" v-model="userAnswers[index]"
                                :label="option.label" @change="handleChange(item, index)"> {{ options[index2] }}、
                                {{ option.value }}</el-radio>
                        </div>
                    </div>
                </template>

                <template v-else-if="item.type === '多选题'">
                    <el-checkbox-group v-model="userAnswers[index]" :disabled="type === 'result'">
                        <el-checkbox v-for="( option, index2 ) in  item.options " :key="index2" class="question-options"
                            :label="option.label" fill="#3560ab" @change="handleChange(item, index)"> {{
                                options[index2] }}、{{ option.value
    }}</el-checkbox>
                    </el-checkbox-group>
                </template>

                <div v-if="type === 'result'" class="detail">
                    <div>你的答案： <span class="your" :class="[item.status]">{{ formatAnswersBase(userAnswers[index]) }}</span>
                    </div>
                    <div>正确答案： <span class="right">{{ formatAnswersBase(item.correctAnswers) }}</span></div>

                </div>


            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['datas', 'userAnswers', "activeIndex", "type"],

    data() {
        return {
            options: ['A', 'B', 'C', 'D', "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
        }
    },


    methods: {
        handleChange(item, index) {
            const val = this.userAnswers[index]
            if (item.type === '单选题') {
                this.$emit("itemClick", index + 1);
            }
        },


        formatAnswersBase(item) {
            if (Array.isArray(item)) {
                return item.sort().join("");
            } else {
                return item
            }
        },



    }

}
</script>

<style lang="less" scoped>
.exam-list {
    .exam-question {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #EFEFEF;

        &:first-child {
            padding-top: 0;
        }

        .question-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 22px;
            text-align: left;
            font-style: normal;
        }

        .question-options {
            margin-top: 10px;
            margin-bottom: 10px;


            &:last-child {
                margin-bottom: 0;
            }

            .option {
                margin-bottom: 14px;


                .label {
                    margin-right: 10px;
                }
            }
        }
    }
}

.detail {
    height: 56px;
    background: #FAFAFA;
    width: 100%;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 40px;

    .right {

        color: #3560ab;
    }

    .your {
        margin-right: 40px;

        &.success {
            color: #3560ab;
        }

        &.error {
            color: #FF3E11;
        }
    }
}

::v-deep {
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #3560ab;
        background: #3560ab;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #3560ab;
    }


    .el-checkbox__input.is-checked .el-checkbox__inner {
        background: #3560ab;
        border-color: #3560ab;

    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #3560ab;
    }


    .el-radio__label {
        color: #333333
    }
}
</style>